<template>
  <div id="login-page">
    <div class="longin-panel">
      <h2>后台管理系统</h2>
      <div id="login-form">
        <m-input placeholder="用户名" style="width: 240px;margin-top: 20px" v-bind:error="accountError" v-model="account"
                 v-on:input="()=>onChange(0)"/>
        <m-input placeholder="密码" style="width: 240px" type="password" v-bind:error="passwordError" v-model="password"
                 v-on:input="()=>onChange(1)"/>
        <m-button value="登录" @click="doLogin"/>
        <div style="flex: 1"/>
        <p>温馨提示：</p>
        <p>未登录过的新用户，自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import MInput from "@/components/common/m-input";
import MButton from "@/components/common/m-button";
// import MButton from "@/components/common/m-button";

export default {
  name: "LoginPage",
  components: {MButton, MInput},
  data() {
    return {
      account: "",
      password: "",
      accountError: "",
      passwordError: "",
    }
  },
  methods: {
    //重置输入状态
    onChange(type) {
      if (type === 0 && this.accountError) {
        this.accountError = null
      } else if (type === 1 && this.passwordError) {
        this.passwordError = null
      }
    },
    doLogin() {
      console.log("点击了登录按钮")
      console.log("账号:" + this.account + " 密码:" + this.password)
      const verifyResult = this.verifyAccount()
      console.log("校验结果:" + verifyResult)
      //校验不通过，终止执行
      if (!verifyResult) return
      const account = this.account
      const password = this.password
      this.$store.dispatch('user/login', {account, password})
          .then(() => {
            this.$router.push("/home");
          })
          .catch(error => {
            alert(error.msg)
          })
    },
    verifyAccount() {
      if (!this.account) {
        this.accountError = "请输入账号"
      }

      if (!this.password) {
        this.passwordError = "请输入密码"
      }
      return !this.accountError && !this.passwordError
    }
  }
}
</script>

<style scoped>
@keyframes firstEnter {
  from {
    top: -100px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes firstEnter /* Safari and Chrome */
{
  from {
    top: -100px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.longin-panel {
  animation: firstEnter 1s;
  -webkit-animation: firstEnter 1s;
  position: relative;
}

#login-page {
  background-color: #2c3e50;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h2 {
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 1px;
}

#login-form {
  width: 400px;
  height: 300px;
  background-color: white;
  border-radius: 10px;
  /*flex布局*/
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 10px;
}

p {
  margin: 0;
  padding: 0;
  color: red;
  font-size: 14px;
}
</style>